<template>
  <div class="about">
    <van-row v-for="item in shopcar" :key="item._id">
      <van-col span="4">
        <input type="checkbox" v-model="item.status" @change="checkItem" />
        <!-- 原生的input框 不要用点击事件而要用change -->
      </van-col>
      <van-col span="20">
        <van-card
          :price="item.price"
          :title="item.title"
          :thumb="item.pic"
          :num="item.num"
        >
          <template #footer>
            <van-stepper v-model="item.num" />
          </template>
        </van-card>
      </van-col>
    </van-row>

    <van-submit-bar
      :price="$store.getters.allPrice * 100"
      button-text="提交订单"
    >
      <van-checkbox v-model="$store.state.checked" @click="checkAll"
        >全选</van-checkbox
      >
      <!-- 这个地方因为是给v-model用的所以我们不用计算属性return 而是直接用 -->
      <!-- vant的复选框要用点击click事件而不是change事件 -->
    </van-submit-bar>
  </div>
</template>
<script>
import { useStore } from "vuex";
import { computed } from "vue";
export default {
  setup(props) {
    const store = useStore();
    const shopcar = computed(() => {
      return store.state.shopcar;
    });
    //通过计算属性拿到购物车数据

    const checkItem = () => {
      store.commit("checkItem");
    };
    //点击上面的复选框触发vuex中的事件

    const checkAll = () => {
      store.commit("checkAll");
    };
    //这是点击全选按钮调用vuex中的事件
    return { shopcar, checkItem, checkAll };
  },
};
</script>
